<template>
  <div class="data_avatar_wide_body">
      <div class="data_avatar_narrow_body">
        
          <div class="data_avatar_content">
            <div class="select_avatar_box">
              <el-upload
              class="avatar-uploader"
              ref="avatarUploader"
              action="http://localhost:88/api/user/upload/avatar"
              :headers="headers"
              :auto-upload='false'
              list-type='picture'
              :show-file-list="false"
              :on-change="handlerAvatarChange"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">

              
                <el-image :src="imageUrl" fit="contain" class="account_data_avatar"></el-image>
                <el-button class="select_avatar_btn"  slot="trigger" size="small" type="primary">选取头像</el-button>

              </el-upload>
            </div>
              
            <div class="save_avatar_btn">
              <el-button @click="uploadAvatar">保存</el-button>
            </div>
            
          </div>
      </div>
  </div>
</template>

<script>
  export default {
    props:{
        getUserData: Function,
    },
    data() {
      return {
        imageUrl: this.currentUser.user.portrait,
        imageFile: {},
        headers:{
          token : localStorage.getItem('user_token_'+this.currentUser.user.uid),
        },
      };
    },
    methods: {
      // 手动上传头像
      uploadAvatar(){
        this.$refs.avatarUploader.submit();
      },
      // 上传成功回调
      handleAvatarSuccess(res, file, fileList) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log("头像上传成功", file, fileList)
        if(file.response.code === 0){
            var portrait = file.response.fileUrl;
            var data = {
                uid : this.currentUser.user.uid,
                portrait: portrait
            }
            console.log("修改头像信息", data)
            this.$http1({
              url: this.$http.adornUrl("/user/login/user/update"),
              method: "post",
              data: this.$http.adornData(data, false)
            }).then(({ data01 }) => {
              this.$message({
                type: "success",
                message: "修改头像成功!",
              });
            //   this.currentUser.user.portrait = data.portrait;
              this.$root.updateUserPortrait(data.portrait);
              console.log("当前用户",this.currentUser.user)
              this.getUserData();
            });
        }
        
      },
      // 发生change回调
      handlerAvatarChange(file, fileList ){
        console.log("on-change1", file, fileList)
        if(fileList.length == 1){
            console.log("只含有一个元素")
        }else{
            fileList.splice(0, fileList.length-1)
            console.log("on-change2", file, fileList)
        }
        
        this.imageUrl = file.url
        this.imageFile = file
      },

      // 上传前调用
      beforeAvatarUpload(file) {
      }
    }
  }
</script>


<style>
.data_avatar_wide_body{
    /* background: #924eff; */
    margin-top: 10px;
}
.data_avatar_narrow_body{
    /* background: #8848ff; */
    width: 90%;
    margin: 0 auto;
}
.data_avatar_content{
  margin-left: 200px;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .account_data_avatar {
    width: 178px;
    height: 178px;
    display: block;
    /* background: #7cbeff; */
  }
  .select_avatar_box{
    margin-top: 0px;
  }
  .select_avatar_box .el-upload{
    margin-left: 60px;
    border-width: 0px;
  }
  .save_avatar_btn{
    margin-top: 20px;
    margin-left: 60px;
  }
</style>

